
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">

<head>
    <title>个人中心</title>
    <%@include file="../common/common.jsp"%>
</head>

<body>
<%@include file="../common/navBarTop.jsp"%>
<div class="container-fluid">
    <div>
        <div class="row">
            <div class="col-md-8 col-md-offset-2">

                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
                                                              data-toggle="tab">我的信息</a></li>
                    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab"
                                               data-toggle="tab">订阅的景区</a></li>
                    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab"
                                               data-toggle="tab">订阅的酒店</a></li>
                    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab"
                                               data-toggle="tab">订阅的票务</a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="home">
                        <div class="row">
                            <div class="col-md-1" style="width: 10%;padding-right: 0;">
                                <label class="text-right" style="width: 100%;line-height: 34px;">头像：</label>
                            </div>
                            <div class="col-md-5">
                                <form>
                                    <input id="file-1" type="file" name="file" multiple class="file"
                                           data-overwrite-initial="false" data-min-file-count="1">
                                </form>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-1" style="width: 10%;padding-right: 0;">
                                <label class="text-right" style="width: 100%;line-height: 34px;">昵称：</label>
                            </div>
                            <div class="col-md-8">
                                <input type="text" id="nickName" class="form-control" >
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-1" style="width: 10%;padding-right: 0;">
                                <label class="text-right"  style="width: 100%;line-height: 34px;">姓名：</label>
                            </div>
                            <div class="col-md-8">
                                <input type="text" id="consName" class="form-control" >
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-1" style="width: 10%;padding-right: 0;">
                                <label class="text-right" style="width: 100%;line-height: 34px;">邮箱：</label>
                            </div>
                            <div class="col-md-8">
                                <input type="text" id="email" class="form-control" readonly>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-1" style="width: 10%;padding-right: 0;">
                                <label class="text-right" style="width: 100%;line-height: 34px;">电话：</label>
                            </div>
                            <div class="col-md-8">
                                <input type="text"  id="phone" class="form-control" >
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-1" style="width: 10%;padding-right: 0;">
                                <label class="text-right" style="width: 100%;line-height: 34px;">生日：</label>
                            </div>
                            <div class="col-md-8">
                                <input type="text" id="brith" class="form-control" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" readonly />
                            </div>
                        </div>
                        <hr>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="profile">
                        <table id="scenicDg" class="table table-striped">
                        </table>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="messages">
                        <table id="hotelDg" class="table table-striped">
                        </table>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="settings">
                        <table id="ticketDg" class="table table-striped">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<%@include file="../common/navBarBottom.jsp"%>
<script type="text/javascript">
    $(function () {
        initPageLoadData();

    });
    /**
     * 页面初始化时  加载数据
     */
    var initPageLoadData=function(){
        Util.get("/user/initPage","",function (result) {
            console.log(result);
            if(result.code===200){
                initBaseInfo(result.data.baseInfo);
                initTable("scenicDg",result.data.scenic);
                initTable("hotelDg",result.data.hotel);
                initTicketTable(result.data.ticket);
            }else {
                swal("提示！","发生错误或者未登录！","error")
            }
        });
    };

    /**
     * 加载我的信息
     */
    var initBaseInfo=function(data){
        $("#nickName").val(data.nickName);
        $("#consName").val(data.consName);
        $("#email").val(data.consumerEmail);
        $("#phone").val(data.phone);
        $("#brith").val(data.consBirth);
    };

    var initTable = function (id,dgdata) {
        var urltype="scenic_spot";
        switch (id) {
            case "scenicDg" : urltype="scenic_spot";break;
            case "hotelDg" : urltype="hotel";break;
        }
        //加载表格
        $('#'+id).bootstrapTable({
            //searchAlign: 'left',
            search: true,   //显示隐藏搜索框
            showHeader: true,     //是否显示列头
            //classes: 'table-no-bordered',
            showLoading: false,
            showFullscreen: false,
            silent: false,
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: false,                   //是否显示分页（*）
            strictSearch: false,
            search: false,
            showColumns: false,                  //是否显示选择所有的列
            showRefresh: false,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 450,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            data_local: "zh-CN",
            data:dgdata,
            columns: [
                {field: 'id',title: '', visible:false},
                {field: 'main_title',title: '标题'},
                {field: 'price',title: '价格'},
                {field: 'phone',title: '电话'},
                {field: 'star',title: '星级'},
                {field: '',title: '操作',
                    formatter:function (value, row, index) {
                        return "<button class=\"btn btn-warning\" onclick=\"update('" + value + "')\"> 取消 </button>" +
                            "&nbsp;&nbsp;" +
                            "<a class=\"btn btn-info\" href='<%=path%>/pages/"+urltype+"/detail.jsp?id="+row.id+"' target=\"_blank\"> 详情 </a>";
                    }
                } ],
            onLoadSuccess: function (result) {  //加载成功时执行
            },
        });
    };

    var initTicketTable=function(dgdata){
        //加载表格
        $('#ticketDg').bootstrapTable({
            search: true,   //显示隐藏搜索框
            showHeader: true,     //是否显示列头
            showLoading: false,
            undefinedText: '',
            showFullscreen: false,
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: false,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            search: false,                      //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: false,
            showColumns: false,                  //是否显示选择所有的列
            showRefresh: false,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 550,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "id",                     //每一行的唯一标识，一般为主键列
            showToggle: false,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            showExport: false,
            exportDataType: 'all',
            exportDataType: "selected",        //导出checkbox选中的行数
            paginationLoop: false,             //是否无限循环
            data_local: "zh-CN",
            data:dgdata,
            columns: [
                { field: 'id', title: '序号', visible: false },
                { field: 'train_info', title: '车次信息' },
                { field: 'start_station', title: '出发站' },
                { field: 'start_time', title: '出发时间' ,formatter:function (value, row, index) {
                        return Util.date.format(new Date(value),"yyyy年MM月dd日 hh时mm分ss秒")
                    }},
                { field: 'run_time', title: '运行时长' },
                { field: 'last_station', title: '到达站' },
                { field: 'last_time', title: '到达时间' ,formatter:function (value, row, index) {
                        return Util.date.format(new Date(value),"yyyy年MM月dd日 hh时mm分ss秒")
                    }},
                {
                    field: '', title: '操作',
                    formatter: function (value, row, index) {
                        return "<button class=\"btn btn-warning\" onclick=\"sendTicket('" + row.id + "')\"> 取消 </button>";
                    }
                }],
        });
    };

    $("#file-1").fileinput({
        uploadUrl: '/tour/admin/ScenicSpotMangage/upload',
        showPreview: true,//是否显示文件预览
        allowedFileExtensions: ['jpg', 'png', 'gif'],
        overwriteInitial: false,
        maxFileSize: 1000,
        maxFileCount: 1,
        dropZoneEnabled: true,//拖拽图片
        uploadLabel: "上传",
        showUpload: true,
        maxImageWidth: 150,//图片的最大宽度
        maxImageHeight: 150,//图片的最大高度
        initialCaption: "请上传",
        dropZoneTitle: "可以将图片拖放到这里",
        enctype: 'multipart/form-data',
        layoutTemplates: {
            actionUpload: '',//去除上传预览缩略图中的上传图片
            actionZoom: '',   //去除上传预览缩略图中的查看详情预览的缩略图标
            actionDownload: '', //去除上传预览缩略图中的下载图标
            actionDelete: '', //去除上传预览的缩略图中的删除图标
        },//对象用于渲染布局的每个部分的模板配置。您可以设置以下模板来控制窗口小部件布局.eg:去除上传图标
        initialPreview: [
            "<img src='../assets/img/tox.jpg'/>"
        ]
    }).on('fileuploaded', function (event, data, previewId, index) {//上传成功
        /* $("#fileName").val(data.response[0].fileName);
        $("#eosid").val(data.response[0].eosid); */
    }).on('fileerror', function (event, data, msg) {//上传失败
    });
</script>
</body>

</html>